<template>
  <view
    class="contents"
    @click="handleDetail"
  >
    <view class="title">

      <!-- <u-icon class='iconleft' name="arrow-right-double" size="28"></u-icon> -->
      <view
        v-if="data.recovered"
        class="iconleft1"
        style="color: #fff"
      >
        <text style="margin-right:10rpx;"></text>
        已恢复
      </view>
      <view
        v-else
        class="iconleft"
        style="color: #fff"
      >
        <text style="margin-right:10rpx;"></text>
        未恢复
      </view>
      <!-- <view
        class="iconleft2"
        style="color: #fff"
      >
        <text style="margin-right:10rpx;"></text>
        {{data.severityString}}
      </view> -->
    </view>
    <view class="detail">
      <view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/dengji.png"
            class="imageBg"
          />
          <view
            class="text"
            style="line-height:28rpx"
          >报警等级：{{ data.severityString }}</view>
        </view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/time.png"
            class="imageBg"
          />
          <view
            class="text"
            style="line-height:28rpx"
          >所属项目：{{ data.projectName }}</view>
        </view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/device.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >产品：{{ data.details[0].deviceName }}</view>
        </view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/number.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >产品代码：{{ data.sn }}</view>
        </view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/guige.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >报警规则名称：{{ data.ruleName }}</view>
        </view>
        <view class="time">
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/date1.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >发生时间：{{ data.start }}</view>
        </view>
        <view
          v-if="data.recovered"
          class="time"
        >
          <image
            style="width:30rpx;height:30rpx"
            src="@/static/images/date1.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >恢复时间：{{ data.end }}</view>
        </view>
      </view>

    </view>

  </view>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: 0
    }
  },
  data() {
    return {};
  },
  methods: {
    handleDetail() {
      let data = JSON.stringify(this.data);
      uni.navigateTo({
        url: "/pages/alarm/detail?data=" + data
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contents {
  position: relative;
  margin-bottom: 20rpx;
  background-color: white;
  padding: 20rpx 20rpx;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx #eee;
  .title {
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    color: #333333;
    .iconleft {
      width: 150rpx;
      text-align: center;
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(145deg, #ff9494, #ff0000);
      // margin-top: 4rpx;
    }
    .iconleft1 {
      width: 150rpx;
      text-align: center;
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(145deg, #09bb07, #008b00);

      // margin-top: 4rpx;
    }
    .iconleft2 {
      width: 140rpx;
      text-align: center;
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(145deg, #09bb07, #008b00);

      // margin-top: 4rpx;
    }
  }

  .detail {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    margin: 0px 30rpx 0px 0px;
    color: #717171;
    .time {
      display: flex;
      margin-bottom: 20rpx;

      .imageBg {
        width: 25rpx;
        height: 25rpx;
        margin-right: 20rpx;
      }
      .text {
        line-height: 20rpx;
        font-size: 24rpx;
      }
    }
  }

  .bottom {
    padding-top: 10rpx;
    color: #111111;
  }
}
.box-button {
  width: 90rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  background: #026cfe;
  color: #ffffff;
  border-radius: 15rpx;
  position: absolute;
  bottom: -10rpx;
  right: -20rpx;
  font-size: 18rpx;
  z-index: 1;
}
.box-delete {
  background: #19be6b;
}
.box-bottom {
  width: 100%;
  display: flex;
}
.icon-img {
  width: 200rpx;
  height: 50rpx;
  position: absolute;
  bottom: 20rpx;
  font-size: 24rpx;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 35rpx;
    height: 35rpx;
  }
}
.video {
  right: -50rpx;
}
.pdf {
  right: 100rpx;
}
</style>
